<!doctype html>
<!--
  backgrid
  http://github.com/wyuenho/backgrid

  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
  Licensed under the MIT @license.
 -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta name="keywords" content="backgrid,backgrid.js,backbone,backbone.js,datagrid,grid,paginator,javascript" />
    <meta name="description" content="A powerful widget set for building data grids with Backbone.js" />

    <meta property="og:title" content="Backgridjs" />
    <meta property="og:description" content="A powerful widget set for building data grids with Backbone.js" />
    <meta property="og:url" content="http://backgridjs.com" />
    <meta property="og:image" content="http://backgridjs.com/img/backgrid-logo.png" />

    <title>Backgrid.js - FAQ</title>

    <link rel="canonical" href="http://backgridjs.com" />

    <link rel="stylesheet" href="/build/build.min.css" />
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="main">
      <header>
        <div class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <a href="/"
                 class="navbar-brand" title="A powerful widget set for building data grids with Backbone.js">Backgrid.js</a>
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                    Introduction
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="/index.html#features">Features</a></li>
                    <li><a href="/index.html#getting-started">Getting Started</a></li>
                    <li><a href="/index.html#basic-example">Basic Example</a></li>
                    <li><a href="/index.html#complete-example">Complete Example</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                    Core API
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="/ref/forewords.html">Forewords</a></li>
                    <li class="divider"></li>
                    <li><a href="/ref/grid.html">Grid</a></li>
                    <li><a href="/ref/column.html">Column</a></li>
                    <li><a href="/ref/cell.html">Cell</a></li>
                    <li><a href="/ref/formatter.html">Formatter</a></li>
                    <li><a href="/ref/header.html">Header</a></li>
                    <li><a href="/ref/row.html">Row</a></li>
                    <li><a href="/ref/body.html">Body</a></li>
                    <li><a href="/ref/footer.html">Footer</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                    Extensions
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="/ref/extensions/development.html">Development Guide</a></li>
                    <li class="divider"></li>
                    <li><a href="/ref/extensions/select-all.html">SelectAll</a></li>
                    <li><a href="/ref/extensions/paginator.html">Paginator</a></li>
                    <li><a href="/ref/extensions/filter.html">Filter</a></li>
                    <li><a href="/ref/extensions/text-cell.html">TextCell</a></li>
                    <li><a href="/ref/extensions/moment-cell.html">MomentCell</a></li>
                    <li><a href="/ref/extensions/select2-cell.html">Select2Cell</a></li>
                    <li class="divider"></li>
                    <li><a href="https://github.com/wyuenho/backgrid/wiki#extensions">More</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                    More Info
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="/misc/styling.html">Styling</a></li>
                    <li class="divider"></li>
                    <li><a href="/misc/faq.html">FAQ</a></li>
                    <li><a href="https://github.com/wyuenho/backgrid/releases">Change Log</a></li>
                    <li><a href="/misc/license.html">License</a></li>
                  </ul>
                </li>
              </ul>
              <ul id="social-media" class="nav navbar-nav navbar-right visible-md visible-lg">
                <li>
                  <a class="sprite-icons-gittip" href="https://www.gittip.com/wyuenho/" title="Gittip Me"></a>
                </li>
                <li>
                  <a class="sprite-icons-github" href="https://github.com/wyuenho/backgrid" title="Fork me on Github"></a>
                </li>

                <li>
                  <a href="https://twitter.com/share?url=http%3A%2F%2Fbackgridjs.com&amp;via=wong_jim&amp;hashtags=backgrid,backbonejs&amp;size=medium"
                     title="Share on Twitter"
                     onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=648,width=845');return false;"
                     class="sprite-icons-twitter"
                     ></a>
                </li>

                <li>
                  <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fbackgridjs.com"
                     title="Share on Facebook"
                     onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=368,width=605');return false;"
                     class="sprite-icons-facebook"
                     ></a>
                </li>

                <li>
                  <a href="https://plus.google.com/share?url=http%3A%2F%2Fbackgridjs.com&amp;annotation=inline"
                     title="Share on Google+"
                     onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
                     class="sprite-icons-google"
                     ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </header>
      <div class="container content">
        
    <div class="page-header">
      <h1>
        <a id="frequently-asked-questions"
           href="#frequently-asked-questions"
           title="Frequently Asked Questions"
           class="section"
           >Frequently Asked Questions</a>
      </h1>
    </div>
    <div class="row">
      <div class="col-md-12">
        <h2>
          <a id="how-do-i-add-a-column-of-computed-values-"
             href="#how-do-i-add-a-column-of-computed-values-"
             title="How do I add a column of computed values?"
             class="section"
             >How do I add a column of computed values?</a>
        </h2>
        <p>The easiest way to do it is to extend your models from a
          <code>Backbone.Model</code> subclass that supports computed
          properties <i>and</i> accessing them via the same <i>get/set</i>
          interface. There are a <a
            href="https://github.com/gmac/backbone.epoxy"
            title="backbone.epoxy">number</a> <a
            href="https://github.com/rhysbrettbowen/Backbone.ModelMorph"
            title="Backbone.ModelMorph">of</a> <a
            href="https://github.com/alexanderbeletsky/backbone-computedfields"
            title="backbone-computedfields">Backbone</a> <a
            href="https://github.com/DreamTheater/Backbone.Schema"
            title="Backbone.Schema">plugins</a> readily available for
          this. Should all else failed, you can <a
            href="http://kilon.org/blog/2012/02/backbone-calculated-fields/"
            title="Backbone.js computed properties">roll your own</a> fairly
          easily.</p>
        <h2>
          <a id="how-do-i-add-or-remove-a-row-"
             href="#how-do-i-add-or-remove-a-row-"
             title="How do I add or remove a row?"
             class="section"
             >How do I add or remove a row?</a>
        </h2>
        <p>You can either use <a
          href="http://backbonejs.org/#Collection-add"
          title="Backbone.Collection#add">Backbone.Collection#add</a> or <a
          href="#api-grid" title="Grid#insertRow">Grid#insertRow</a> for
          insertion. Similarly, use <a
          href="http://backbonejs.org/#Collection-remove"
          title="Backbone.Collection#remove">Backbone.Collection#remove</a>
          or <a href="#api-grid" title="Grid#removeRow">Grid#removeRow</a>
          to remove rows.</p>
        <h2>
          <a id="how-do-i-put-the-grid-in-a-default-sorted-state-"
             href="#how-do-i-put-the-grid-in-a-default-sorted-state-"
             title="How do I put the grid in a default sorted state?"
             class="section"
             >How do I put the grid in a default sorted state?</a>
        </h2>
        <p>See the <a href="/ref/grid.html#sorting-programmatically"
                      title="Sorting Programmatically">sorting
                      programmatically</a> section.</p>
        <h2>
          <a id="how-do-i-validate-user-input-"
             href="#how-do-i-validate-user-input-"
             title="How do I validate user input?"
             class="section"
             >How do I validate user input?</a>
        </h2>
        <p>See the <a href="/ref/formatter.html#validation" title="Formatter Validation">validation section</a> on <a href="/ref/formatter.html" title="Formatter">Formatter</a>.</p>
        <h2>
          <a id="how-do-i-save-my-row-changes-to-the-server-immediately-"
             href="#how-do-i-save-my-row-changes-to-the-server-immediately-"
             title="How do I save my row changes to the server immediately?"
             class="section"
             >How do I save my row changes to the server immediately?</a>
        </h2>
        <textarea class="code-snippet" data-mode="javascript">
          var MyModel = Backbone.Model.extend({
            initialize: function () {
              Backbone.Model.prototype.initialize.apply(this, arguments);
              this.on("change", function (model, options) {
              if (options &amp;&amp; options.save === false) return;
                model.save();
              });
            }
          });</textarea>
        <h2>
          <a id="where-do-i-go-to-ask-questions-"
             href="#where-do-i-go-to-ask-questions-"
             title="Where do I go to ask questions?"
             class="section"
             >Where do I go to ask questions?</a>
        </h2>
        <p>
          Finding an answer to your question about Backgrid is a simple 4-step process:
        </p>
        <ol>
          <li>Ponder about the wisdom of your question and the answer you seek.</li>
          <li>Search this document for the keywords you are looking for.</li>
          <li>Pay your tribute to the almighty <a href="https://www.google.com/" title="Google">Google</a>.</li>
          <li>
            Go to <a href="http://stackoverflow.com/questions/tagged/backgrid" title="StackOverflow">StackOverflow</a>
            or as a last resort, <a href="https://github.com/wyuenho/backgrid/issues" title="Github">Github</a>.
          </li>
        </ol>
        <h2>
          <a id="does-backgrid-js-support-adaptive-scrolling-"
             href="#does-backgrid-js-support-adaptive-scrolling-"
             title="Does Backgrid.js support adaptive scrolling?"
             class="section"
             >Does Backgrid.js support adaptive scrolling?</a>
        </h2>
        <p>Some data grid widgets out there support a technique
          called adaptive scrolling, meaning the DOM elements will be
          swapped out of a viewport and new ones appended as the
          models are loaded from the server, thus keeping the memory
          more or less constant while providing an illusion to
          end-users that there's no limit to the number of rows the
          data grid can handle.</p>
        <p>Backgrid.js has something better and achieves the same
          effect with much cleaner code -
          <a href="#api-paginator">paginator extension</a>, which
          uses <a href="https://github.com/wyuenho/backbone-pageable/"
                  title="backbone-pageable">backbone-pageable</a>. The paginator
          supports both paging on the server-side, or preloading all the
          models and paging purely through the browser. Paginated
          Backgrid.Grid instances only render one page of DOM nodes at a
          time to save memory and keep your web page responsive.</p>
        <h2>
          <a id="does-backgrid-js-support-function-aggregates-"
             href="#does-backgrid-js-support-function-aggregates-"
             title="Does Backgrid.js support function aggregates?"
             class="section"
             >Does Backgrid.js support function aggregates?</a>
        </h2>
        <p>No, because it is not the goal of this project to produce a
          full-fledged web-based spreadsheet. However, doing aggregation is
          trivial using Underscore.js methods.</p>
        <textarea class="code-snippet" data-mode="javascript">
          // sum all the values of a column
          var sum = collection.reduce(function (accum, num) {
            return accum + num;
          });</textarea>
        <p>If you use a Backbone plugin that supports <a href="#how-do-i-add-a-column-of-computed-values-"
                                                         title="Computed Values">computed values</a>, you may also treat the
          computed values as a column as well.</p>
        <h2>
          <a id="does-backgrid-js-support-multi-user-editing-"
             href="#does-backgrid-js-support-multi-user-editing-"
             title="Does Backgrid.js support multi-user editing?"
             class="section"
             >Does Backgrid.js support multi-user editing?</a>
        </h2>
        <p>Inside a Backgrid grid, every cell listens to the change event
          for its model value. The cells will rerender themselves during
          display mode upon changes in the model values. However, this
          functionality is only meant for synchronizing data automatically
          across multiple grids on the same page. If you are attempting to
          synchronize data changes across multiple processes, you will
          need some kind of a locking mechanism for the individual cells,
          Backgrid.js provides no help for that and you have to do this
          yourself. Implementing such web-based spreadsheet-like broker
          system is outside of the scope of this project, pull requests
          are welcome however.</p>
        <h2>
          <a id="does-backgrid-js-support-feature--x--"
             href="#does-backgrid-js-support-feature--x--"
             title="Does Backgrid.js support feature (X)?"
             class="section"
             >Does Backgrid.js support feature (X)?</a>
        </h2>
        <p>If the feature you have in mind isn't found here in this
          Backgrid.js version, it could either be in the works or under
          consideration.</p>
        <p>See the list
          of <a href="https://github.com/wyuenho/backgrid/issues?labels=enhancement&amp;milestone=&amp;page=1&amp;state=open"
                title="Github Issues">tasks and enhancements</a>.</p>
        <h2>
          <a id="how-to-build-backgrid-js-" href="#how-to-build-backgrid-js-" title="How to build Backgrid.js?" class="section">How to build Backgrid.js?</a>
        </h2>
        <p><a href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md#building" title="Contributing">See Building.</a></p>
        <h2>
          <a id="how-do-i-contribute-" href="#how-do-i-contribute-" title="How do I contribute?" class="section">How do I contribute?</a>
        </h2>
        <p><a href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md" title="Contributing">See Contributing.</a></p>
        <h2>
          <a id="why-doesn-t-backgrid-js-support-amd--or-npm--"
             href="#why-doesn-t-backgrid-js-support-amd--or-npm--"
             title="Why doesn't Backgrid.js support AMD (or NPM)?"
             class="section"
             >Why doesn't Backgrid.js support AMD (or NPM)?</a>
        </h2>
        <p>The same question can be asked for volo, bower, ender, browserify and
          many other competing solutions. The number one reason Backgrid.js does
          not support AMD or NPM is because of the barrier it presents to
          writing extensions that require third-party libraries that don't
          support these packaging mechanisms.</p>
        <p>That said, it <em>is</em> possible to use Backgrid and its various
          extensions with AMD using RequireJS's <a
          href="http://requirejs.org/docs/api.html#config-shim"
          title="RequireJS Shimming">shim</a> option.
          For CommonJS, there is also first-class support for <a
          href="https://github.com/component/component"
          title="Component">Component</a>.</p>
        <p>The problem with supporting any package manager is that Backgrid.js
          is a highly modular project, and that deciding to use any package
          manager presupposes all its submodules and dependency is compatible
          with such a package manager and its importing mechanism. The
          Javascript ecosystem has gotten so diverse now that there is still not
          yet a clear packaging winner that everybody uses and works well under
          most situations, it is also not clear that ES Harmony's module
          system will be backward compatible with AMD.</p>
        <p>Having said that, Backgrid.js doesn't do anything to prevent you
          from adding support to your favorite package manager. You are
          encouraged to fork and maintain your own Backgrid.js packages.</p>
      </div>
    </div>
  
      </div>
    </div>
    <div id="layout-footer">
      <div class="container">
        <p class="text-muted">
          Copyright &copy; 2013 <a href="mailto:wyuenho@gmail.com" title="Jimmy
          Yuen Ho Wong">Jimmy Yuen Ho Wong</a> and contributors. Logo designed
          by <a href="http://kylerosenberg.com/" title="Kyle Rosenberg">Kyle
          Rosenberg</a>. <a href="/misc/license" title="License">MIT
          Licensed.</a>
        </p>
      </div>
    </div>
    
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-36403214-1']);
      _gaq.push(['_setDomainName', 'backgridjs.com']);
      _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    <script src="/build/build.min.js"></script>
    <script>
      $ = jQuery = require("jquery");
      require("bootstrap");
      require("select2");
      _ = require("underscore");
      Backbone = require("backbone");
      Backbone.$ = $;
      require("backbone-pageable");
      Backgrid = require("backgrid");
      require("backgrid-paginator");
      require("backgrid-filter");
      require("backgrid-select-all");
      require("backgrid-select2-cell");
      require("backgrid-moment-cell");
      require("backgrid-text-cell");
      require("codemirror");
      $(document).ready(function () {
        $("a[href^='/#'], a[href^='#']").click(function (e) {
          e.preventDefault();
          var target = this.hash;
          if (target) {
            var $target = $(target);
            $("html, body").stop().animate({
              "scrollTop": $target.offset().top - 55
            }, 500, "swing", function() {
              window.location.hash = target;
            });
          }
        });
      });
    </script>
    

    <script>
      require("backgridjs-com").setUpCodeMirror();
    </script>
  </body>
</html>

